<template>
  <el-dialog
    title="添加学员信息"
    :visible="dialogVisible"
    width="700px"
    @close="del"
  >
    <el-form
      label-width="120px"
      :model="formDate"
    >
      <el-row
        type="flex"
        justify="space-betwwen"
      >

        <el-form-item label="归属学科">
          <el-select
            v-model="formDate.subject_id"
            placeholder="请选择"
            @change="subjectclickItem"
          >
            <el-option
              v-for="item in subjectInformation"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="归属班级">
          <el-select
            v-model="formDate.class_id"
            clearable
            placeholder="归属班级"
          >
            <el-option
              v-for="item in classData_"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

      </el-row>
      <el-row
        type="flex"
        justify="space-betwwen"
      >
        <el-form-item label="学生姓名">
          <el-input v-model="formDate.student_name" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model.number="formDate.student_phone" />
        </el-form-item>
      </el-row>
      <el-row
        type="flex"
        justify="space-betwwen"
      >
        <el-form-item label="密码">
          <el-input v-model="formDate.student_password" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio
            v-model="formDate.student_sex"
            :label="1"
          >男</el-radio>
          <el-radio
            v-model="formDate.student_sex"
            :label="2"
          >女</el-radio>
        </el-form-item>

      </el-row>
      <el-row
        type="flex"
        justify="space-betwwen"
      >

        <el-form-item label="状态">
          <el-radio
            v-model="formDate.student_state"
            :label="1"
          >待审核</el-radio>
          <el-radio
            v-model="formDate.student_state"
            :label="2"
          >正常</el-radio>
          <el-radio
            v-model="formDate.student_state"
            :label="3"
          >禁用</el-radio>
        </el-form-item>

      </el-row>

    </el-form>
    <el-row
      slot="footer"
      type="flex"
      justify="end"
      align="midden"
    >
      <el-col>
        <el-button @click="del">取消</el-button>
        <el-button @click="btnOK">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { classclass, newStudents, updateUserData } from '@/api/class'
export default {
  name: 'StudentList',
  props: {
    dialogVisible: {
      type: Boolean,
      reuqire: true
    },
    subjectInformation: {
      type: Array,
      required: true
    }
  },
  data() {
    const FormDate = {
      subject_id: null,
      class_id: null,
      student_name: '',
      student_phone: null,
      student_password: '',
      student_sex: null,
      student_state: null
    }
    return {
      formDate: {
        ...FormDate
      },
      classData_: []
    }
  },
  methods: {
    async subjectclickItem() {
      const { data } = await classclass({
        page: 1,
        limit: 1000,
        subject_id: this.formDate.subject_id
      })
      this.classData_ = data.list
    },
    del() {
      this.formDate = {
        ...this.FormDate
      }
      this.$emit('update:dialog-visible', false)
    },
    async btnOK() {
      try {
        if (this.formDate.id) {
          await updateUserData(this.formDate)
        } else {
          await newStudents(this.formDate)
        }

        this.$message.success('操作成功')
        this.$parent.addClass()
        this.$emit('update:dialog-visible', false)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
